<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-height, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>创建签名</title>
    <style>
        h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td {
            margin: 0;
            padding: 0;
        }
        .btn-name{ color:#fff;width:100%; background-color: #4fbbf4; padding: 5px 0; border-radius: 5px; font-size: 16px;border: none}
        .btn-name:focus{outline: none;}
        @media screen and (orientation: portrait) { body{display: none;}/*竖屏 css*/
        }
        @media screen and (orientation: landscape) {/*横屏 css*/}
        #div-drawSign:hover {
            cursor: url("common/pen.svg") 0 47, pointer;
        }
        .div-drawSign canvas{border: 1px solid #ddd;}
        .margin-div{width:80px;position: absolute;right:20px;}
        .mg-top{bottom:60px;}
        .mg-bot{bottom:20px;}
        .div-drawSign{width:100%;height:100%;padding: 15px 170px 0 15px;overflow: hidden;}
        .container-fl{width: 87.4vw;height:100vh;float: left;margin: 0;padding: 0;position: relative;}
        /**/
        nav{background:url("common/images/nav.png")no-repeat center #4fbbf4;background-size:60% ;width:12.5vw;height:100vh;float: left;}
    </style>
    <script src="common/jquery.min.js"></script>
    <script src="common/signature_pad.min.js"></script>
    <script src="common/bootstrap.min.js"></script>
    <script src="common/sweetalert.min.js"></script>
    <link href="common/bootstrap.min.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<nav></nav>
<div class="container-fl">
    <div class="div-drawSign" id="div-drawSign">
        <canvas></canvas>
    </div>
    <div class="margin-div mg-top">
        <button class="btn-name btn-use" id="btn-addSign">采用</button>
    </div>
    <div class="margin-div mg-bot">
        <button class="btn-name btn-clear" id="btn-clear">清除</button>
    </div>
</div>
</body>
<script type="text/javascript">
    $(function () {
        // $( window ).orientationchange();
        var canvas = document.querySelector("canvas");
        var signaturePad;
        // init();
        signaturePad = initCanvas();
        $('#btn-clear').on('click', function () {
            signaturePad.clear();
        });
        $('#btn-addSign').on('click', function () {
            if (signaturePad.isEmpty()) {
                swal({
                    title: "请绘制你的签名",
                    type: "error",
                    showCancelButton: false
                });
                return false;
            }
            sessionStorage.sign = (signaturePad.toDataURL()).split("base64,")[1];
            // console.log((signaturePad.toDataURL()).split("base64,")[1]);
            window.location.href = './sign.html';
        });
        /**
         * 初始化画签名的画布
         */
        function initCanvas() {
            // var ratio = Math.max(window.devicePixelRatio || 1, 1);
            var offsetWidth = $(canvas.parentNode).width();
            //console.log($(canvas.parentNode).width());
            canvas.width = offsetWidth;
            canvas.height = offsetWidth * 0.95;
            return new SignaturePad(canvas, {
                minWidth: 1.4, maxWidth: 2
            });
            //signaturePad.penColor="rgb(255,255,0)";
        }

        $(function () {
            if (window.orientation == 0 || window.orientation == 180) {
                alert('请横屏！');
                return false;
            }
            initCanvas();
        });
        $(window).bind('orientationchange', function (e) {
            var $body = $("body");
            if (window.orientation == 0 || window.orientation == 180) {
                alert('请横屏！');
                return false;
            }
            initCanvas();
        });
        /**
         * 获取url中的token参数
         * @returns {*}
         */
        function getToken() {
            return ((window.location.search.split('token=')[1]) || 'noTokenFound').split('&')[0];
        }
    });
</script>
</html>